<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>淘宝页面</title>
    <style>
        *{margin: 0px;padding: 0px;}
        .top{
            height: 72px;
            text-align: center;
            background: #18BEBE url("images/logo.png") no-repeat center center; }
     
        .header{
             width:71px; height: 33px;
             background: rgba(128, 128, 128, 0.22)  }
        .container{
                height:40px;width:1000px;
                 text-align:center;
                 line-height: 40px;  
                 margin-bottom: 20px;  
                 margin-left: auto;margin-right: auto;  }
        .title{
          margin-left: auto;margin-right: auto;
          width: 1000px;
          margin-bottom: 20px;
              }
        .start{float: left;;overflow:hidden}
        .end{float: right;overflow:hidden}
        .container a{margin-right:60px;text-decoration: none;font-size: 20px;color:#333;}
        .start>.icon/*左边 */{display: block;width:19px;height:19px;background:url(images/location.png);
            position:absolute;top:50%;margin-top:-10px;
            }
        .start>.first{margin-left:30px;}
        .start,.end{position:relative}
        .end>.icon/*右边 */{
            top:50%;
            margin-top:-10px;
            position:absolute;width:19px;height:19px;background:url(images/adm.png)
        }
        .end>.adm{
            padding-left:20px;
        }
        .start,.end{font-size: 12px;cursor:pointer}
         
        .var li{
        float: left;list-style: none;
        width: 100px;text-align: center;
        
        }
        .row:after{
        content: "";
        display: block;
        clear: both;
        }
        .var a{
        display: block;color: #5D5D5D;text-decoration: none;
        }
        .var ul{
        line-height: 30px; 
        line-height: 50px;
        background: #EBEBEB;
        width: 1016px;
        margin-left: auto;margin-right: auto;
        }
          a:hover{
        background: #F7CD91;
         }
        .zt{
            font-size: 15px;
            width: 1016px;
            margin-left: auto;margin-right: auto;
        }
     
    /*  .search{
           box-sizing: border-box;
         }
        .parent-2{
          width: 1016px;
          margin-left: auto;margin-right: auto;
          background: #F7F7F7;
          /* 当使用inline-block布局，给父元素font-size:0 */
         
        /*  }
        .parent-2>.child-2{
          display: inline-block;
          width: 1016px;
          height: 55px;
         
          background: #EBEBEB ;
          margin-bottom: 20px;
         }
    */ 
      div{
           box-sizing: border-box;
      }
      .parent{
          width: 1016px;
          margin-left: auto;margin-right: auto;
          background: #F7F7F7  ;
          /* 当使用inline-block布局，给父元素font-size:0 */
          font-size: 0 ; 
      }
      .parent>div{
          display: inline-block;
          width: 240px;
          height: 300px;
         
          background: #EBEBEB ;
          
           /*url("images/data_image.png") no-repeat center top 10px; */
          margin-top: 20px;
          text-align: center;
      }
      /* .parent>div:not(:last-child){
          margin-right:13.333px;
      } */
      
      .parent>.child{
          margin-right: 14px;
          font-size: 10px;
          text-align: center;
          
      }
      .child-1{
          font-size: 15px;
          color: #FFA700;
         
      }
      .child-2{
          font-size: 17px;
          font-weight: bold;
          color: #FFA700;
         
      }
      .child-3{
          font-size: 15px;
          color: black; 
      }
      .child-4{
          font-size: 17px;
          font-weight: bold;
          color:#18BEBE
         
      }
     /* .parent>.ziti{
        font-size: 10px;
        width: 1016px;
        text-align: center;
        margin-left: auto;margin-right: auto;
      }  */
 
      
       .nar li{
        float: left;list-style: none;
        width: 100px;text-align: center;
        
        }
        .row::after{
        content: "";
        display: block;
        clear: both;
        }
        .nar a{
        width: 50px;height: 40px;
        display: block;color:black;;text-decoration: none;
        }
        .nar ul{
        line-height: 30px; 
        background: #515151;
        width: 1016px;
        margin-left: auto;margin-right: auto;
        }
        .var a:hover{
        width: 55px;height: 40px;
        background:white;
        border: 3px solid #FFA700;
        margin-left: auto;margin-right: auto;
        
         }
        .bottom{
            width:1016px;
            margin-left: auto;margin-right: auto;
           
        }
        table{
        width:1016px;
        line-height: 50px;
        border-collapse: collapse;
        text-align:left;
        
        }
        table,td{
          text-align: left;
         /* border:1px solid black; */
        }

      .question{
          background: url("images/small_weixin.png") no-repeat center right  ; 
          width: 100px;height: 100px;
          margin-top: -30px;
          
      } 
      .question-1{
          font-size: 19px;
          color: #B4E3E1
      } 
      .question-2{
          color: black;
          line-height: 20px;
          font-size: 16px;
         
      } 
     /* .question-3{
        width:1016px;
          font: 16px;color:black;
          font-family: monospace; 
          margin-left: auto;margin-right: auto;
      } */
      .jw{
          margin-top: 30px;
          background: #515151;
          height: 201px;
      }
     /* .jw-1{
          margin-top: 20px;
          margin-left: auto;margin-right: auto;
          line-height: 12px;
      } */
     .footer {
        width:1016px;
        line-height: 50px;
        border-collapse: collapse;
        text-align: center;
        margin-left: auto;margin-right: auto;
        }
      
      .footer-1{
          font-size: 13px;
          width: 43px;height: 40px;
          color: white;
          font-weight: bold;
          text-align: center;
          line-height: 12px;
      }
      .footer-2{
          font-size: 13px;
          color: white;
          margin-left: auto;margin-right: auto;
          line-height: 42px;
      }
      .footer-3{
          font-size: 13px;
          color: white;
          margin-left: auto;margin-right: auto;
          line-height: 12px;
      }
      .footer-v {
        width:1016px;
        line-height: 50px;
        border-collapse: collapse;
       
        margin-left: auto;margin-right: auto;
        }
        .footer li{
        float: left;list-style: none;
        width: 100px;text-align: center;
        
        }
        .footer:after{
        content: "";
        display: block;
        clear: both;
        }
    </style>
</head>
<body>
        <div class="top"></div>
        <div class="header">
         <div class=" center container">
            <a href="#">首页</a>
            <a href="#">咨询</a>
            <a href="#">测评</a>
            <a href="#">商城</a>
            <div class="start">
                <i class="icon"></i>
                <span class="text first">深圳</span>
                <span class="text">切换</span>
            </div>
            <div class="end">
                <span class="icon"></span>
                <span class="adm">个人中心</span>
             </div>
           </div>
         </div>
        
         <div class="title">
                <h3>首页>预防装修污染>材料库</h3> 
            </div>
        <div class="var">
            <ul class="row">
              <div class="zt">
            <li><a href="#">类别</a></li>
            <li><a href="#">全部</a></li>
            <li><a href="#">地板</a></li>
            <li><a href="#">涂料</a></li>
            <li><a href="#">墙纸</a></li>
            <li><a href="#">瓷砖</a></li>
            <li><a href="#">粘胶剂</a></li>
            <li><a href="#">油漆</a></li>
            <li><a href="#">家居</a></li>
         <!--   <li><a href="#">板材</a></li>  -->
            <li><a href="#">饰品↓</a>  </li>

            
            <br>
            <li><a href="#">材质</a></li>
            <li><a href="#">实木</a></li>
            <li><a href="#">复合</a></li>
            <li><a href="#">强化</a></li>
            <li><a href="#">其他</a></li>
            <br>
            <li><a href="#">品牌</a></li>
            <li><a href="#">全部</a></li>
            <li><a href="#">圣象</a></li>
            <li><a href="#">大自然</a></li>
            <li><a href="#">生活家</a></li>
            <li><a href="#">北美枫情</a></li>
            <li><a href="#">德尔</a></li>
            <li><a href="#">博典</a></li>
            <li><a href="#">船王</a></li>
             </div>
            </div> 
        </ul>
      </div>
     
        <div class="parent-2">
            <div class="child-2">
            <p> </p>   
            </div>
            </div> 

        <div class="parent">
         <div class="child">
         <img src="images/data_image.png" alt="">
         <p class="child-1">德尔   都市系列3001</p><p class="child-1">木地板 - 复合地板</p><p class="child-1">单价：128元/㎡</p><p class="child-2">环保评级：B（可以使用）</p></div>  
         
         <div class="child"><img src="images/data_image.png" alt="">
         <p class="child-3">德尔   都市系列3001</p><p class="child-3">木地板 - 复合地板</p><p class="child-3">单价：128元/㎡</p><p class="child-4">环保评级：B（可以使用）</p> </div>
        
         <div class="child"><img src="images/data_image.png" alt="">
            <p class="child-3">德尔   都市系列3001</p><p class="child-3">木地板 - 复合地板</p><p class="child-3">单价：128元/㎡</p><p class="child-4">环保评级：B（可以使用）</p> </div>
        
        <div class="child"><img src="images/data_image.png" alt="">
            <p class="child-3">德尔   都市系列3001</p><p class="child-3">木地板 - 复合地板</p><p class="child-3">单价：128元/㎡</p><p class="child-4">环保评级：B（可以使用）</p> </div>
        </div>  

        <div class="parent">
            <div class="child">
            <img src="images/data_image.png" alt="">
            <p class="child-3">德尔   都市系列3001</p><p class="child-3">木地板 - 复合地板</p><p class="child-3">单价：128元/㎡</p><p class="child-4">环保评级：B（可以使用）</p></div>  
                
            <div class="child"><img src="images/data_image.png" alt="">
            <p class="child-3">德尔   都市系列3001</p><p class="child-3">木地板 - 复合地板</p><p class="child-3">单价：128元/㎡</p><p class="child-4">环保评级：B（可以使用）</p> </div>
               
            <div class="child"><img src="images/data_image.png" alt="">
            <p class="child-3">德尔   都市系列3001</p><p class="child-3">木地板 - 复合地板</p><p class="child-3">单价：128元/㎡</p><p class="child-4">环保评级：B（可以使用）</p> </div>
               
            <div class="child"><img src="images/data_image.png" alt="">
            <p class="child-3">德尔   都市系列3001</p><p class="child-3">木地板 - 复合地板</p><p class="child-3">单价：128元/㎡</p><p class="child-4">环保评级：B（可以使用）</p> </div>
        </div>  
        
        <div class="bottom">
        <table>
         <tr><td rowspan="4" class="question">
         <tr><td class="question-2">建材检测 需求反馈</td></tr>
         <tr><td class="question-2">亲爱的用户，我们正在不断的完善和更新建材库,<br>若没有找到你想要的材料信息，请将你想测得建材告诉我们。</td></tr> 
        </table>    
        </div>

            <div class="jw">
            <div class="footer center">
                <ul> 
                <li>
                <img src="images/footerLogo.png" alt="" >  
                 </li>
                <li class="footer-1">为室内环境健康把好每一关</li>
                <li class="footer-2">家居医生致力于中国人的家居健康问题，通过专业的技术研究</li>
                <li class="footer-3">和测评，倾力协助大众打造绿色、环保的人居生活环境。</li>
            </ul>
                <ul>
                <li>关于我们 原版说明</li>
                <li>联系我们 用户隐私</li>
                <li>加入我们 免责申请</li>
                </ul>
        
           <!-- <ul>
                <li>
                    <img src="images/weixin2.png" alt=""><p>官方微信</p>
                </li>
                <li>
                    <img src="images/tianmao.png" alt=""><p>天猫旗舰店</p>
                </li>
                <li>
                    <img src="images/shop.png" alt="" ><p>有赞商城</p>
                </li>
            </ul>
       
          -->
            </div>
            </div>
      
</body>
</html>    